<template>
  <div >
    <!--    头部区域-->
    <div style="display: flex; height: 70px; line-height: 70px; margin-bottom: 4px; " :style="{backgroundColor: backgroundColor}" >
      <!--      左侧logo-->
      <div style="width: 220px;">
        <img src="../../assets/image/common/logo.png" alt="" style="width: 40px; position: relative; top: 10px; left: 20px">
        <span style="margin-left: 25px;" class="title">金玥智阅</span>
      </div>

      <!--      营业状态-->
      <div>
        <el-tag type="success" effect="dark"  v-if="business_status === 1">开馆中</el-tag>
        <el-tag type="warning" effect="dark"  v-if="business_status === 0">闭馆中</el-tag>
      </div>
      <!-- 背景风格选择 -->
      <div style="margin-left: 20px; height: 70px; display: flex; flex-direction: column; justify-content: center;">
        <div style="display: flex; align-items: center; height: 30px">
          <span style="color: white; margin-right: 5px; font-size: small">背景颜色:</span>
          <el-color-picker
              v-model="backgroundColor"
              show-alpha
              :predefine="backgroundColors"
              style="width: 150px;">
          </el-color-picker>
        </div>
        <div style="display: flex; align-items: center; height: 30px">
          <span style="color: white; margin-right: 5px; font-size: small">字体颜色:</span>
          <el-color-picker
              v-model="fontColor"
              show-alpha
              :predefine="fontColors"
              style="width: 150px;">
          </el-color-picker>
        </div>
      </div>

      <!--      右侧用户登录与退出-->
      <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center; margin-right: 20px;" >
        <div class="status-text" @click="statusVisible = true"><i class="el-icon-discover" ></i> 营业状态设置</div>

        <el-menu  active-text-color="#ffd04b" mode="horizontal" style="width: 160px; display: flex" :backgroundColor= backgroundColor :text-color=fontColor>
          <img src="../../assets/image/user/empty-avatar.png" style="width: 50px; height: 50px; margin-top: 5px;">
          <el-submenu index="1" style="width: 100px;">
            <template slot="title" >
              {{ admin.account }}</template>
            <el-menu-item @click="logout" index="1-1" >退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>

    <!--    侧边栏和主体-->
    <div style="display: flex; height: calc(100vh - 74px); ">
      <!--      侧边栏导航-->
      <div style="width: 200px; min-height: calc(100vh - 74px); overflow: hidden; margin-right: 4px; overflow-y: auto;" :style="{backgroundColor: backgroundColor}" >
        <el-menu :default-active="$route.path " active-text-color="#ffd04b" class="el-menu-demo" router style="width: 200px"
                 :backgroundColor= backgroundColor :text-color=fontColor>
          <!--          首页-->
          <el-menu-item index="/admin/home" style="width: 200px">
            <i class="el-icon-eleme"></i>
            <span>首页</span>
          </el-menu-item>
          <!--          图书管理-->
          <el-submenu index="bookManagement" style="width: 200px">
            <template slot="title">
              <i class="el-icon-reading"></i><span>图书管理</span>
            </template>
            <el-menu-item index="/admin/categoryManagement"><i class="el-icon-date"></i>图书分类管理</el-menu-item>
            <el-menu-item index="/admin/bookManagement"><i class="el-icon-tickets"></i>图书管理</el-menu-item>
            <el-menu-item index="/admin/bookCopyManagement"><i class="el-icon-copy-document"></i>图书副本管理</el-menu-item>
          </el-submenu>
          <!--          用户管理-->
          <el-menu-item index="/admin/userManagement" style="width: 200px">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <!--          管理员管理-->
          <el-menu-item index="/admin/adminManagement" style="width: 200px">
            <i class="el-icon-setting"></i>
            <span>管理员管理</span>
          </el-menu-item>
          <!--          图书审核-->
          <el-menu-item index="/admin/bookCheck" style="width: 200px">
            <i class="el-icon-s-check"></i>
            <span>图书审核</span>
          </el-menu-item>
          <!--          图书归还检测-->
          <el-menu-item index="/admin/returnDetection" style="width: 200px">
            <i class="el-icon-camera"></i>
            <span>图书归还检测</span>
          </el-menu-item>
          <!--          查看列表-->
          <el-submenu index="viewList" style="width: 200px">
            <template slot="title">
              <i class="el-icon-s-order"></i><span>查看列表</span>
            </template>
            <el-menu-item index="/admin/borrowList"><i class="el-icon-document-add"></i>图书借阅列表</el-menu-item>
            <el-menu-item index="/admin/orderList"><i class="el-icon-document-remove"></i>订单列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!--      主体内容-->
      <div style="flex: 1; padding: 10px 5px; overflow-y: auto; background-color: white">
        <router-view/>
      </div>
    </div>

    <!--    营业状态设置-->
    <el-dialog :visible.sync="statusVisible"  style="width: 680px; margin-left: 400px" @close="this.cancelStatus">
      <div style="font-size: larger; font-weight: bolder">营业状态设置</div>
      <div>
        <div class="custom-border" @click="business_status = 1">
          <el-radio v-model="business_status" :label="1" border class="radio-text">
            开馆中
          </el-radio>
          <div style="font-size: small">当前平台处于开馆状态，读者可以图书借阅和归还，可点击闭馆进入平台闭馆状态</div>
        </div>
        <div class="custom-border" @click="business_status = 0">
          <el-radio v-model="business_status" :label="0" border class="radio-text">
            闭馆中
          </el-radio>
          <div style="font-size: small">当前平台处于闭馆状态，读者仅可以图书归还，可点击开馆进入平台开馆状态</div>
        </div>
        <div style="margin-top: 15px; text-align: right">
          <el-button @click="this.cancelStatus" style="background-color: khaki;">取消</el-button>
          <el-button @click="this.setStatus" style="background-color: #67C23A; color: white">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import request from "@/utils/adminRequest";

export default {
  name: 'adminLayout',
  data() {
    return {
      admin: Cookies.get('adminCookie') ? JSON.parse(Cookies.get('adminCookie')) : {},
      backgroundColor: '#545c64',
      business_status: 1,  // 营业状态
      statusVisible: false, // 营业状态设置弹框
      fontColor: '#fff',
      fontColors: [    // 可供选择的字体颜色
        '#fff',
        'rgba(226, 26, 223, 0.87)',
        '#d9534f',
        '#b0e0e6',
        'rgba(20, 222, 182, 0.79)',
        'rgba(98, 238, 34, 1)',
      ],
      backgroundColors: [    // 可供选择的背景颜色
        '#545c64',
        '#3a5b89',
        '#2e2e2e',
        '#3a5b89',
        '#4b8e4a',
        '#6c757d',
        '#3e4b5b',
      ]
    }
  },

  mounted() {
    // 获取营业状态
    this.getStatus()
  },
  methods: {
    // 营业状态弹框取消操作
    cancelStatus() {
      this.getStatus()
      this.statusVisible = false;
    },
    // 获取当前平台营业状态
    getStatus() {
      request.get('/admin/getStatus').then(res => {
        this.business_status = res.data;
      })
    },
    // 设置当前平台营业状态
    setStatus() {
      request.put('/admin/setStatus/' + this.business_status).then(res => {
        if(res.code === 200) this.$message.success("平台状态设置成功!")
        this.statusVisible = false;
      })
    },
    // 转到忘记密码页面
    skip() {
    },
    logout() {
      // 清除浏览器数据
      Cookies.remove('adminCookie')
      this.$router.push('/login')

    }
  }
}

</script>

<style scoped>

.layout .el-menu-item {
  width: 100px; /* 确保菜单项宽度与 el-menu 一致 */
  min-width: 100px; /* 防止宽度缩小 */
  max-width: 100px; /* 防止宽度增大 */
  white-space: nowrap; /* 防止文本换行 */
  text-align: center; /* 文本居中 */
}
.title {
  color: #87cefa; /* 浅蓝色 */
  font-size: 25px; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  font-family: 'Georgia', serif;  /*优雅字体*/
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* 阴影效果 */
}

.status-text {
  color: white;
  cursor: pointer;
  margin-right: 30px;
}
.status-text:hover {
  color: #ffeb3b;
}

::v-deep .el-dialog__header {
  padding: 0; /* 设置header的padding为0 */
  height: auto;
}
::v-deep .el-dialog__body {
  padding: 20px ;
  height: auto;
}

.radio-text {
  border: 0px;
  font-weight: bold;
}
.custom-border {
  margin-top: 15px;
  border-width: 2px;            /* 设置边框宽度 */
  border-style: solid;           /* 设置边框样式（solid 实线, dashed 虚线, dotted 点线） */
  border-color: #909399;            /* 设置边框颜色 */
  border-radius: 8px;            /* 设置边框圆角 */
  padding: 10px;                 /* 内边距 */
  width: 300px;                  /* 宽度 */
  height: 100px;                  /* 高度，设置 auto 使内容自适应 */
}
.custom-border:hover {
  border-color: goldenrod;
  cursor: pointer;
}


</style>